<template>
  <div class="add">
    <miAn-xie :betGao="betGao"></miAn-xie>
    <el-card>
      <!-- 步骤 -->
      <el-steps :active="active - 0" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 导航 -->
      <el-tabs tab-position="left" v-model="active">
        <el-tab-pane label="基本信息" nane="0">
          <el-form
            :model="ruleFormX"
            :rules="rules"
            ref="ruleFormX"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="ruleFormX.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="ruleFormX.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="ruleFormX.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="ruleFormX.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
              <el-cascader
                v-model="ruleFormX.get_cat"
                :options="list"
                :props="addSs"
              >
              </el-cascader>
              {{ ruleFormX }}
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-show="1==1" @click="submitForm('ruleFormX')"
                >立即创建</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="商品参数"
          ref="ruleForm"
          nane="1"
          >商品参数</el-tab-pane
        >
        <el-tab-pane label="商品属性" nane="2">商品属性</el-tab-pane>
        <el-tab-pane label="商品图片" nane="3">
          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:8888/api/private/v1/upload"
            :headers="{ Authorization: this.$store.getters.token }"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleReSucc"
            :on-error="handleReScc"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件,且不超过500kb
            </div>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" nane="4">
          <quill-editor v-model="content" :options="editorOption">
          </quill-editor>
          <el-button type="primary" @click="add_jia">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { get_categories ,goods_post} from "@/http/goods/add";
// 引入样式和quillEditor
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
  data() {
    return {
      // 面包屑
      betGao: [
        {
          path: "/home",
          title: "首页",
        },
        {
          path: "/goods",
          title: "商品管理",
        },
        {
          path: "/goods/add",
          title: "添加商品",
        },
      ],
      // 列表数据
      list: [],
      value: [],
      // 内容
      content: "",
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
          ],
        },
      },
      active: 0,
      //   基本信息
      ruleFormX: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
        goods_cat: "",
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        // goods_cat: [{ required: true }],
      },
      //   图片
      fileList: [],
      // 添加的分类
      addSs: {
        checkStrictly: true,
        label: "cat_name",
        value: "cat_id",
      },
    };
  },
  mounted() {
    this.get_cateGo();
  },
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleReSucc(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handleReScc(err, file, fileList) {
      console.log(err, file, fileList);
    },
    // 获取列表
    async get_cateGo() {
      let res = await get_categories();
      console.log(res);
      this.list = res.data;
    },
    handleChange(value) {
      console.log(value);
    },
    // 添加
    async add_jia(){
      let res = await goods_post(this.ruleFormX)
      console.log(res);
    }
  },
  // 注册 quillEditor
  components: {
    quillEditor,
  },
};
</script>
<style lang="scss">
.el-card {
  margin: 20px 0;
}
// .el-scrollbar__wrap {
//   height: 300px;
// }
// .el-cascader-menu{
//   height: 300px;
// }
.el-cascader-panel {
  height: 400px !important;
}
</style>